<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar leftIconSize="40" :autoBack="true" height="0px" bgColor="#f9f9f900"> </u-navbar>

		<!-- 图片 -->
		<view class="topImg">
			<!-- <u--image style="border-radius: 30rpx;" src="https://cdn.uviewui.com/uview/album/1.jpg"  @click="click"></u--image> -->
		</view>



		<!-- 球局信息 -->
		<view style="margin: -13% auto;">
			
			<!-- 对阵信息 -->
			<view class="ballGame">
				<view class="padding10-40">
					<u--text lineHeight="80" align="center" size="35" text="2024/10/23 14:00"></u--text>
					<u--text  align="center" color="#888693" size="25" text="黄浦区诺看体育场"></u--text>
					<view class="margin-top-2" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="flex">
							<u-icon name="chat-fill" color="#2979ff" size="28"></u-icon>
							<u--image radius="50" src="'https://cdn.uviewui.com/uview/album/1.jpg" width="80px" height="80px"></u--image>
						</view>
						<view>
							<u-icon name="chat-fill" color="#2979ff" size="70"></u-icon>
						</view>
						<view class="flex">
							<u-icon name="chat-fill" color="#2979ff" size="28"></u-icon>
							<u--image radius="50" src="'https://cdn.uviewui.com/uview/album/1.jpg" width="80px" height="80px"></u--image>
						</view>
					</view>
				</view>
			</view>
			
			

			<view class="ballGame">
				<view class="padding10-40">
					<u--text size="35" bold text="教个朋友局"></u--text>
					<view class="margin-top-2" style="display: flex;">
						<view style="margin-right: 3%;" v-for="item in 3" class="tag">养生局</view>
					</view>
				</view>

				<view>
					<view class="padding10-40">

						<view>
							<view class="flex padding15-0">
								<u-icon name="woman" size="28"></u-icon>
								<text class="distance">时间：本周六16：00-18：00</text>
							</view>
							<view class="flex padding15-0">
								<u-icon name="woman" size="28"></u-icon>
								<text class="distance">地点：12.6km | 诺克求大球场</text>
								<u-icon name="woman" size="28"></u-icon>
							</view>
							<view class="flex padding15-0">
								<u-icon name="woman" size="28"></u-icon>
								<text class="distance">类型：足球（7人制）</text>
							</view>
							<view class="flex padding15-0">
								<u-icon name="woman" size="28"></u-icon>
								<text class="distance">收费：￥400（AA制）</text>
							</view>
						</view>
					</view>
				</view>

				<view class="gameInfo" style="width: 93%; height: auto; background-color: #F2F3F5; margin: 2% auto;">
					<view class="padding10-30">
						<u--text size="20"
							text="00:01:44.501项目'footballBookingApp' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看00:01:44.501 项目 'footballBookingApp' 编译成功。"></u--text>
					</view>
				</view>

			</view>
			
	
			
			
			
			<!-- 报名人数 -->
			<view class="ballGame">
					<view class="padding10-40 space-between">
						<view class="captainBox">
							<view style="margin-right: 10%;">
								<u--image :showLoading="true"  radius="10"
								src="https://cdn.uviewui.com/uview/album/1.jpg"
								 width="60px" height="60px"></u--image>
							</view>
							
							 <view style="width: 200rpx;">
								 <u--text size="28" text="广州球王"></u--text>
								 <u--text color="#706E8F" text="发起人"></u--text>
							 </view>
						</view>
						<view style="height: 45rpx;" class="tag">组队中</view>
					</view>
					
					<view class="padding10-40">
						<view class="margin-top-2" style="display: flex;">
							<view style="margin-right: 3%;" v-for="item in 3" class="tag">养生局</view>
						</view>
					</view>
					
					<view class="padding10-40">
						<view class="margin-top-2 space-around">
							<view class="teamInfoTag">
								<u--text lineHeight="50"  align="center" bold size="30" text="14"></u--text>
								<u--text align="center" size="20" color="#B8B6BE" text="报名人数"></u--text>
							</view>
							
							<view class="teamInfoTag">
								<u--text lineHeight="50"  align="center" bold size="30" text="菜鸟"></u--text>
								<u--text align="center" size="20" color="#B8B6BE" text="球队评级"></u--text>
							</view>
							
							<view class="teamInfoTag">
								<u--text lineHeight="50"  align="center" bold size="30" text="14"></u--text>
								<u--text align="center" size="20" color="#B8B6BE" text="平均年龄"></u--text>
							</view>
							
							<view class="teamInfoTag">
								<u--text lineHeight="50"  align="center" bold size="30" text="黑色"></u--text>
								<u--text align="center" size="20" color="#B8B6BE" text="球队颜色"></u--text>
							</view>
							
						</view>
					</view>
				<u-divider></u-divider>
				<view class="padding10-40">
						<text style="color: #4A43EC;">报名球员 </text>
						<text> 11/16-30</text>
				</view>
				<view class="padding10-30" style="display: flex;">
					<view v-for="item in 6" style="margin-right: 3%">
						<u--image width="45px" height="45px" radius="8px"
							src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image>
							<u--text align="center" size="28" text="名字"></u--text>
					</view>
				</view>
			</view>
			
			<!-- 留言 -->
			<view  class="ballGame">
				<view style="display: flex;justify-content: space-around;">
					<view style="width: 70%; height: 50rpx;">
						<u-search bgColor="#F3F4F5" searchIconSize="0"  height="80" :showAction="false" placeholder="留言"></u-search>
					</view>
					<view style="width: 130rpx;font-size: 80rpx;">
						<u-button color="#4A43EC" shape="circle" type="primary" text="发布"></u-button>
					</view>
				</view>
				
				<view  class="padding10-40 space-between margin-top-3">
					<view class="captainBox">
						<view style="margin-right: 10%;">
							<u--image :showLoading="true"  radius="10"
							src="https://cdn.uviewui.com/uview/album/1.jpg"
							 width="60px" height="60px" @click="click"></u--image>
						</view>
						
						 <view style="width: 200rpx;">
							 <u--text size="28" text="广州球王"></u--text>
							 <u--text color="#706E8F" text="这是我的留言不服来战."></u--text>
						 </view>
					</view>
					<view class="flex">
						<u-icon name="thumb-up-fill"></u-icon>
						<text>17</text>
					</view>
				</view>
				<view class="padding10-40">
					<u--text size="28" text="欢迎大家都来报名,不认识的也可以来,就是交个朋友,球技都一般,就是来的,开开心心就行."></u--text>
					
				</view>
				
				<view class="padding10-40">
					<text>5回复</text>
					<text>33分钟前</text>
					<text>回复</text>
				</view>
				
				<!-- 留言区 -->
				<view class="messageBox padding10-30">
					<view class="padding15-0" v-for="item in 3">
						<text style="font-weight: bold;">小红：</text>
						<text>大家这次可以提前分一分队伍，戴上好看的衣服哦，不见不散</text>
					</view>
					<u--text color="#888693" size="18" text="查看5条评论"></u--text>
				</view>
			</view>
			
			<!-- 报名 -->
			<view style="width: 90%; height: 40%; margin: 3% auto;" class="padding10-40 space-between">
				<view style="width: 10%;">
					<u-icon name="star" color="#c0c0c0" size="50"></u-icon>
					<u--text color="#888693" size="18" text="收藏"></u--text>
				</view>
				<u-button size="large" shape="circle" color="#4A43EC" text="报名"></u-button>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.
	.content {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
	}

	.topImg {
		width: 100%;
		height: 488rpx;
		border-radius: 0px 0px 40rpx 40rpx;
		opacity: 1;
		background: url(https://cdn.uviewui.com/uview/album/1.jpg);
	}

	.ballGame {
		padding: 20rpx 0;
		width: 93%;
		height: auto;
		border-radius: 16.98px;
		opacity: 1;
		margin: 3% auto;
		background: #FFFFFF;
		box-shadow: 0px 2.12px 20px 0px rgba(83, 89, 144, 0.15);
	}

	.gameInfo {
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		border-radius: 24rpx;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		margin: 0 7rpx;

	}

	.distance {
		color: #9593A4;
		/* 距离文本颜色 */
		font-size: 20rpx;
		/* 字体大小 */
	}
	.captainBox{
		display: flex;
		align-items: center;
	}
	.messageBox{
		width: 80%;
		height: auto;
		border-radius: 8px;
		opacity: 1;
		margin: 0 auto;
		background: #F2F3F4;
	}
	.teamInfoTag{
		margin-right: 0%;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 22%;
		border-radius: 16rpx;
		height: auto;
		padding: 3% 0;
		background-color: white;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 5px 20px 0px rgba(211, 209, 216, 0.3);
	}
</style>